<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="业务标题">
              <a-input placeholder="请输入业务标题" v-model="queryParam.bpmBizTitle"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="流程名称">
              <a-input placeholder="请输入流程名称" v-model="queryParam.processDefinitionName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item label="任务发起人">
              <a-input-search placeholder="选择任务发起人" readOnly @search="handleSelect" v-model="model.realName">
                <a-button slot="enterButton" icon="search">选择</a-button>
              </a-input-search>
            </a-form-item>
          </a-col>
          <!--
          <a-col :md="6" :sm="12">
            <a-form-item label="流程编号">
              <a-input placeholder="请输入流程编号" v-model="queryParam.processDefinitionId"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :md="8" :sm="12">
            <a-form-item label="办理时间"  >
              <a-range-picker
                showTime
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                v-model="createTimeRange"
                @change="(dates, dateStrs) => { queryParam.createTime_start = dateStrs[0]; queryParam.createTime_end = dateStrs[1] }"
                style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->


    <!-- table区域-begin -->
    <div>

      <a-table
        :scroll="{x: scrollX}"
        ref="table"
        size="middle"
        :components="draggableComponent"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleProcess(record)">
              历史
            </a>
          <a-divider type="vertical" />
          <a @click.stop="selectForward(record)">
            转发
          </a>
        </span>

        <!-- 字符串超长截取省略号显示-->
        <!-- <span slot="bpmBizTitle" slot-scope="text, record">
          <j-ellipsis :value="text" :length="15"/>
        </span> -->
        <!-- <span slot="processDefinitionId" slot-scope="text, record">
          <j-ellipsis :value="text" :length="18"/>
        </span> -->
        <!-- <span slot="processDefinitionName" slot-scope="text, record">
          <j-ellipsis :value="text" :length="15"/>
        </span> -->

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 弹出框 -->
    <his-task-deal-modal ref="taskDealModal" :path="path" :formData="formData"></his-task-deal-modal>
    <select-single-user-modal ref="selectSingleUserModal" @selectFinished="selectUserOK"></select-single-user-modal>
    <select-forward-modal ref="selectForwardModal" @selectFinished="handleForward"></select-forward-modal>
  </a-card>
</template>

<script>
import {putAction} from '@/api/manage'
import HisTaskDealModal from "./HisTaskDealModal";
import JEllipsis from '@/components/jeecg/JEllipsis'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {BpmNodeInfoMixin} from '@/views/modules/bpm/mixins/BpmNodeInfoMixin'
import SelectSingleUserModal from "./form/SelectSingleUserModal.vue";
  import SelectForwardModal from '@/views/modules/bpm/task/form/SelectForwardModal';

export default {
    name: "MyHisTaskList",
    mixins: [JeecgListMixin,BpmNodeInfoMixin],
    components: {
      HisTaskDealModal,
      JEllipsis,
      SelectForwardModal,
      SelectSingleUserModal
    },
    data () {
      return {
        createTimeRange: [],
        description: '我的历史任务',
        // 查询条件
        queryParam: {},
        model:{
          realName:""
        },
        // 表头
        columns: [
          {
            title: '序号',
            width: 60,
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          }, {
            title: '业务标题',
            align: 'center',
            dataIndex: 'bpmBizTitle',
            width: 120,
            ellipsis: true,
            // scopedSlots: { customRender: 'bpmBizTitle' }
          },
          // {
          //   title: '流程编号',
          //   align: 'center',
          //   dataIndex: 'processDefinitionId',
          //   width: 120,
          //   ellipsis: true,
          //   // scopedSlots: { customRender: 'processDefinitionId' }
          // },
          {
            title: '流程名称',
            align: 'center',
            dataIndex: 'processDefinitionName',
            width: 100,
            ellipsis: true,
            // scopedSlots: { customRender: 'processDefinitionName' }
          },
          // {
          //   title: '流程实例',
          //   align: 'center',
          //   width:100,
          //   ellipsis: true,
          //   dataIndex: 'processInstanceId'
          // },
          // {
          //   title: '任务ID',
          //   align: 'center',
          //   width:100,            
          //   ellipsis: true,
          //   dataIndex: 'taskId'
          // },
          {
            title: '发起人',
            align: 'center',
            width:100,
            ellipsis: true,
            dataIndex: 'processApplyUserName'
          }, {
            title: '办理人',
            align: 'center',
            width:100,
            ellipsis: true,
            dataIndex: 'taskAssigneeName'
          }, {
            title: '办理时间',
            align: 'center',
            width:120,
            ellipsis: true,
            dataIndex: 'taskEndTime'
          }, {
            title: '耗时',
            align: 'center',
            width:100,
            ellipsis: true,
            dataIndex: 'durationStr'
          }, {
            title: '当前环节',
            align: 'center',
            // fixed: 'right',
            width:120,
            dataIndex: 'taskName'
          }, {
            title: '操作',
            dataIndex: 'action',
            // fixed: 'right',
            align: 'center',
            width:120,
            scopedSlots: {customRender: 'action'}
          }
        ],
        path:"modules/bpm/task/form/FormLoading",
        formData:{},
		    url: {
          list: "/api/erpmng/act/task/taskHistoryList",
          taskForward:'/api/erpmng/act/task/taskForward',
        },
        taskId: '',
        bpmBizTitle:"",

      }
    },
    methods: {
      searchReset() {
        this.createTimeRange = []
        this.queryParam = {}
        this.model = {};
        this.loadData(1)
      },
      handleProcess(record){
        this.getHisProcessNodeInfo(record);
      },
      handleSelect: function(){
        this.$refs.selectSingleUserModal.select();
      },
      // selectUserOK: function(data){
      //   this.$set(this.model, 'realName',  data.realname)
      //   this.queryParam.processApplyUserId = data.username;
      // },
      selectUserOK: function(data){
        this.$set(this.model, 'userName',  data.realname)
        this.$set(this.model, 'realName',  data.realname)
        this.queryParam.processApplyUserId = data.username;
        this.queryParam.userName = data.username;
      },
      handleOk(){
        this.loadData();
      },
      selectForward(record) {
        console.log(record);
        this.taskId = record.id;
        this.bpmBizTitle = record.bpmBizTitle;
        this.$refs.selectForwardModal.select(record);
        this.$refs.selectForwardModal.title = '选择转发人';
      },
      handleForward(data) {
        var that = this;
        var params = {
          taskId: this.taskId,
          bpmBizTitle: this.bpmBizTitle,
          taskAssignee: data.username
        };// 查询条件
        putAction(that.url.taskForward, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.handleOk();
          } else {
            that.$message.warning(res.message);
            that.handleOk();
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .ant-card-body {
    margin-bottom: 18px;
  }

  .table-operator button {
    margin-bottom: 18px;
    margin-right: 5px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }
</style>